<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="common.css">
</head>
<body>
    <div class="toolbar">
        <button value="dark">dark</button>
        <button value="calm">calm</button>
        <button value="light">light</button>
    </div>
    <h2>Stackoverflow Question</h2>
	I would like to use an external javascript file in another javascript file. For example, I could store all my global variables
in a globals.js file and then call then from the website logic logic.js. Then in the index.html, i would insert the tag.
How do I use the globals.js inside the logic.js?

<h2>Stackoverflow Answer</h2>
Javascript doesn't have any implicit "include this other file" mechanisms, like css's @include. You just have to list your
globals file before the logic file in the tags:

<pre><code>
script type="text/javascript" src="globals.js"
</code></pre>
If guaranteeing that the globals are available before anything in the logic file fires up, you can do a slow polling loop
to see if some particular variable is available before calling an init() or whatever function.

<script>
    const root = document.documentElement;
    // console.log(root);
    const themeBtns = document.querySelectorAll('button');
    themeBtns.forEach(btn =>{
        btn.addEventListener('click', handleThemeUpdate);
    })

    function handleThemeUpdate(e){
        // console.log(e.target.value);
        // js 可以去操作css
        // querySelector creatElement
        // css .style
        switch(e.target.value){
            case "dark":
                root.style.setProperty("--bg", "black");
                root.style.setProperty("--bg--text", "white");
                break;
            case "calm":
                root.style.setProperty("--bg", "#B3E5FC");
                root.style.setProperty("--bg--text", "#37474F");
                break;
            case "light":
                root.style.setProperty("--bg", "white");
                root.style.setProperty("--bg--text", "black");
                break;
        }
    }
</script>
</body>
</html>